<template>
    <div :class="['chat-bubble', position]">
      <img :src="avatar" class="avatar" alt="avatar" />
      <div class="bubble-content">
        <slot></slot>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'ChatBubble',
    props: {
      avatar: {
        type: String,
        required: true
      },
      position: {
        type: String,
        required: true,
        validator: value => ['left', 'right'].includes(value)
      }
    }
  }
  </script>
  
  <style scoped>
  .chat-bubble {
    display: flex;
    align-items: flex-end;
    margin: 10px 0;
  }
  .chat-bubble.left {
    flex-direction: row;
  }
  .chat-bubble.right {
    flex-direction: row-reverse;
  }
  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0 10px;
  }
  .bubble-content {
    max-width: 60%;
    padding: 10px;
    border-radius: 10px;
    background-color: #e0ddd1;
    position: relative;
  }
  .chat-bubble.left .bubble-content::before {
    content: '';
    position: absolute;
    top: 15px;
    left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent #e0ddd1 transparent transparent;
  }
  .chat-bubble.right .bubble-content::before {
    content: '';
    position: absolute;
    top: 15px;
    right: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent transparent #e0ddd1;
  }
  </style>